<template>
    <div class="loginMain">
        <van-nav-bar
                title="用户登录"
                style="background-color: #FFc300"
        />
        <!--登录面板-->
        <div class="loginLable">
            <van-form ref="loginForm">
                <van-field
                        v-model="user.username"
                        placeholder="请输入用户名"
                        left-icon="manager"
                        required
                        clearable
                        :rules="userCheckout.checkUsername"
                />
                <van-field
                        v-model="user.password"
                        type="password"
                        placeholder="请输入密码"
                        left-icon="lock"
                        clearable
                        :rules="userCheckout.checkPassword"
                />

                <div style="margin: 16px;">
                    <van-button round block @click="loginUser" type="info">登录</van-button>
                </div>
                <div style="margin: 16px;">
                    <van-button round block @click="skipRegister" type="default">注册</van-button>
                </div>

            </van-form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        components:{},
        data(){
            return{
                user:{
                    username:'zbbnb',
                    password:'12345'
                },
                userCheckout:{
                    checkUsername:[
                        {pattern:/\w{5,12}/,message:"账号以字母开头,长度5-12位"}
                    ],
                    checkPassword:[
                      {pattern:/\w{5,12}/,message:"数字、字母、下划线,长度5-12位"}
                    ]
                }
            }
        },
        methods:{
            loginUser(){
             this.$refs.loginForm.validate().then(async resp=>{
                 const {data:res}=await this.$http.post("/user/login",this.user);
                 if (res.status!=200)return this.$notify({type:'danger',message:"你的用户名或密码错误!"});
                 //跳转路由
                 this.$router.push("/main");
                 this.$notify({type:"success",message:"登录成功"});
                 const userID=res.data.uid;
                 this.findUserShoppingTrolley(userID);
                 sessionStorage.setItem("userID",userID);
                 this.$store.commit('updateDeskName',"一号桌")
             }).catch(error=>{

             })


            },
            //查询用户购物车初始化数量
           async findUserShoppingTrolley(uid){
              const{data:res}=await this.$http.get("/dish/findShoppingDish/"+uid);
              const dishList=res.data;
               //初始化购物车数量
               this.$store.commit("updateShoppingTotal",dishList.length);

            },
            //跳转注册组件
            skipRegister(){
                this.$router.push("/register")
            }
        }
    }
</script>

<style scoped>
    .loginMain{
        width: 100%;
        height: 100%;

        background-size: cover;
        position: relative;
    }
    .loginHeadImg{
        position: absolute;
        left: 50%;
        top: 25%;
        transform-origin: center center;
        transform: translate(-50%,-50%);
    }
    .loginLable{
        margin-top: 10px;
    }
    .loginBtns{
        margin-top: 15px;
        margin-left: 60px;
    }
    .registBtn{
        margin-left: 40px;
    }
</style>
